<template>
   <div class="nav">
      <router-link to="/films" active-class="active">
      <i class="iconfont icon-playcircle-fill"></i>
      <i class="con">电影</i>
      </router-link> 
      <router-link to="/cinemas" active-class="active">
      <i class="iconfont icon-stopcircle-fill "></i>
      <i class="con">影院</i>
      </router-link> 
       <router-link to="/findinfos" active-class="active">
       <i class="iconfont icon-paperplane-fill "></i>
       <i class="con">咨询</i>
       </router-link> 
      <router-link to="/myself" active-class="active">
      <i class="iconfont icon-account "></i>
      <i class="con">我的</i>
      </router-link>
    </div>
</template>


<script>
export default {
  name: 'Tabbar',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.nav {
  width: 100%;
  height:40px;
  border-top: 1px solid #000;
  background-color: #fff;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  bottom: 0px;
  left: 0px;
  a{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .active{
    color: orange;
  }
  i{
    font-style: normal;
  }
  .con{
    font-size: 12px;
  }
}
</style>
